<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: "家用电器" },
    { value: 27, name: "户外运动" },
    { value: 24, name: "汽车用品" },
    { value: 23, name: "手机数码" },
  ];
  const testDimensions = ["name", "value"];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    title: {
      // 标题设置
      text: "分类占比", // 标题文字
      textStyle: {
        // 标题文字样式设置
        color: "red",
      },
      borderWidth: 5, // 标题边框宽度
      borderColor: "blue", // 标题边框颜色
      borderRadius: 5, // 标题边框圆角
      left: 50, // 标题距离左边的距离
      top: 10, // 标题距离顶部的距离
    },

    grid: {
      left: "2%",
      right: "2%",
      bottom: "10%",
      containLabel: true,
    },
    legend: {
      top: "bottom",
      textStyle: {
        color: "#999",
      },
    },
    tooltip: {
      trigger: "item",
    },
    dataset: {
      dimensions: testDimensions,
      source: testData,
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 130],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 1,
          color: function (params: any) {
            //自定义颜色
            const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
            return colorList[params.dataIndex];
          },
        },
        encode: {
          itemName: testDimensions[0],
          value: testDimensions[1],
          tooltip: testDimensions[1],
        },
      },
    ],
  };
});
</script>